<template>
  <div>
    <px-table v-loading="loading" :data="typeList" height="200" show-overflow-tooltip border>
      <px-table-column label="Time" prop="eventTime">
        <template #default="scope">
          <span>{{ scope.row.eventTime ? scope.row.eventTime : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column label="Alarm Type" prop="alarmType">
        <template #default="scope">
          <span>{{ scope.row.alarmType ? scope.row.alarmType : "-" }}</span>
        </template>
      </px-table-column>

      <px-table-column label="Value" prop="pointValue">
        <template #default="scope">
          <span>{{ scope.row.pointValue ? scope.row.pointValue : "-" }}</span>
        </template>
      </px-table-column>

      <px-table-column label="Indicate Name" width="160" prop="indicatorName">
        <template #default="scope">
          <span>{{ scope.row.indicatorName ? scope.row.indicatorName : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" align="center" width="140">
        <template #default="scope">
          <px-button v-if="scope.row.status != 'INVALID'" link type="primary" @click="handleEditor(scope.row)">
            <px-tooltip class="box-item" content="批注" placement="top">
              <px-icon><EditPen /></px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="scope.row.status != 'INVALID'" link type="primary" @click="getcontentList(scope.row.id)">
            <px-tooltip class="box-item" content="批注历史" placement="top">
              <px-icon><Time /></px-icon></px-tooltip
          ></px-button>
        </template>
      </px-table-column>
      <template #empty>
        <px-empty :image-size="150" />
      </template>
    </px-table>

    <pagination
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-bottom: -10px"
      :total="total"
      @pagination="getList"
    />
    <px-dialog v-model="contentVisible" draggable clickHideContent title="批注历史" width="956" align-center>
      <px-table v-loading="loading" class="digtable1" :data="contentList" height="250" show-overflow-tooltip border>
        <px-table-column label="Update Time" prop="createTime">
          <template #default="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </px-table-column>
        <px-table-column label="Update user" prop="creator">
          <template #default="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </px-table-column>
        <px-table-column label="Content" prop="content">
          <template #default="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </px-table-column>

        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>
      <pagination
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        style="margin-bottom: -10px"
        :total="total2"
        @pagination="getcontentList"
      />
      <!-- <template #footer>
        <span class="dialog-footer">
          <px-button @click="progressVisible = false">取消</px-button>
          <px-button type="primary" @click="addRukudetails()"> 确认 </px-button>
        </span>
      </template> -->
    </px-dialog>
    <px-dialog v-model="contentTextVisible" draggable clickHideContent title="批注" width="677" align-center>
      <px-row class="contentrow">
        <px-col :span="12">
          <span> Time : </span>
          {{ contentvalue.createTime }}
        </px-col>
        <px-col :span="12">
          <span> Indicate Name : </span>
          {{ contentvalue.indicatorName }}
        </px-col>
      </px-row>
      <px-row class="contentrow">
        <px-col :span="12">
          <span> Alarm Type : </span>
          {{ contentvalue.alarmType }}
        </px-col>
        <px-col :span="12">
          <span> Value (ppm) : </span>
          {{ contentvalue.pointValue }}
        </px-col>
      </px-row>
      <px-row class="contentrow">
        <px-col :span="24">
          <span> 批注 :</span>
          <px-input v-model="constenttext" style="margin-top: 16px" :rows="2" type="textarea" placeholder="请输入" />
        </px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="contentTextVisible = false">取消</px-button>
          <px-button type="primary" @click="addcontent()"> 保存 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, watch } from "vue";
import { spcIndicatorquerySpcAnalysisResultList, spcNotequeryList, spcNoteadd } from "@/api/spc";
import { PxMessage } from "px-ui";
const props = defineProps({
  activeName: {
    type: String,
    default: ""
  },
  jobIdList: {
    type: Array,
    default: () => []
  },
  dateSpc: {
    type: Array,
    default: () => []
  }
});
const total = ref(10);
const total2 = ref(10);
const contentVisible = ref(false);
const contentTextVisible = ref(false);
const loading = ref(true);
const data = reactive({
  typeList: [],
  contentList: [],
  contentvalue: {},
  constenttext: "",
  queryParams: {
    orderByColumn: "",
    isAsc: "",
    planName: "",
    checkTypeCode: "",
    approveStatus: "",
    taskStatus: "",
    createrId: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 10
  },
  queryParams2: {
    orderByColumn: "",
    isAsc: "",
    planName: "",
    checkTypeCode: "",
    approveStatus: "",
    taskStatus: "",
    createrId: "",
    orderBy: "",
    pageNum: 1,
    pageSize: 10
  }
});
const { queryParams, typeList, contentList, queryParams2, contentvalue, constenttext } = toRefs(data);

watch(
  () => props.activeName,
  newOption => {
    console.log(newOption);
    getList();
  }
);

watch(
  () => props.jobIdList,
  newOption => {
    console.log(newOption);
    getList();
  }
);

watch(
  () => props.dateSpc,
  newOption => {
    console.log(newOption);
    getList();
  }
);

function getList() {
  loading.value = true;
  spcIndicatorquerySpcAnalysisResultList({
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    jobIdList: props.jobIdList,
    alarmType: props.activeName == "all" ? "" : props.activeName,
    startTime: props.dateSpc[0],
    endTime: props.dateSpc[1]
  }).then(res => {
    if (res != null) {
      typeList.value = res.pageResponse.data;
      total.value = res.pageResponse.total;
    } else {
      typeList.value = [];
      total.value = 0;
    }
  });
  loading.value = false;
}
getList();

const getcontentList = businessKey => {
  contentVisible.value = true;
  spcNotequeryList({
    pageNum: queryParams2.value.pageNum,
    pageSize: queryParams2.value.pageSize,
    businessKey: businessKey
  }).then(res => {
    console.log(res);
    contentList.value = res.data;
    total2.value = res.total;
  });
};

const addcontent = () => {
  spcNoteadd({
    businessKey: contentvalue.value.id,
    content: constenttext.value
  }).then(res => {
    console.log(res);
    PxMessage({
      message: "批注成功",
      type: "success"
    });
    contentTextVisible.value = false;
  });
};
const handleEditor = row => {
  contentvalue.value = row;
  constenttext.value = "";
  console.log(contentvalue.value);
  contentTextVisible.value = true;
};
</script>
<style scoped lang="scss">
.contentrow {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}
</style>
